<template>
	<div class="swiper_slide">
		<swiper :space-between="50" effect="fade" :loop="true" :autoplay="autoplay"
		:pagination="{'clickable': true}">
			<swiper-slide v-for="(item,index) in slideList" :key="index">
				<a href="#"><img class="swiper_img" :src="item.img" /></a>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
	import SwiperCore, {Pagination,Autoplay,EffectFade} from 'swiper';
	import {Swiper,SwiperSlide} from 'swiper/vue';
	import 'swiper/swiper.scss';
	import 'swiper/swiper-bundle.css' 
	import "swiper/components/pagination/pagination.min.css"
	SwiperCore.use([Pagination, Autoplay, EffectFade]);
	import { reactive,onMounted } from 'vue'
	export default {
		components: {
			Swiper,
			SwiperSlide
		},
		props: {
		    slideList: Array
		},
		setup(){
			const autoplay = reactive({
				delay: 2000, // 自动切换的时间间隔
				disableOnInteraction: true // 用户操作swiper之后，是否禁止autoplay
			})
			return {autoplay}
		}
	}
</script>

<style>
	.swiper_slide {position:relative;background:#BED5F5;}
	.swiper_img {width:70%;padding-top:20px;}
</style>
